import { useState } from "react";
import { useEffect } from "react";

import "./App.css";

function App(props: any) {
  // 主应用可以通过 props 给子应用传递数据，子应用通过 props 拿到
  // 示例：props.greeting 即为主应用传递的数据
  // 如需监听 props 变化，可以使用 useEffect
  // 例如，打印主应用传递的数据变化：
  
  window.addEventListener('main-to-sub', (event) => {
    // event.detail 就是主应用发送的数据
    console.log('收到主应用的数据：', event.detail);
  });

  return (
    <>
      <div style={{ border: "2px dashed #67c23a", padding: 20 }}>
        <h2>React 18 子应用（Vite）</h2>
        <p>父页传来的数据：{props.greeting || "无"}</p>
        <button
          onClick={() =>
            window.parent.postMessage({ type: "sub", payload: "Hi Main!" }, "*")
          }
        >
          向父页发消息
        </button>
      </div>
    </>
  );
}

export default App;
